import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Heima from '@/components/Heima.vue';

Vue.config.productionTip = false

// 使用Vue.use关键字声明插件
Vue.use(ElementUI)

// 定义一个插件
const HeimaUI = {
  // 必须有一个install方法
  install: function(Vue) {
    // 声明全局组件
    Vue.component('Heima', Heima)
    // 还可以定义一些全局filter,指令，mixin
  }
}

// 使用插件,只要调用use方法，install方法就会被触发
Vue.use(HeimaUI);


// 定义个验证规则的插件
const RulesPlugn = {
  // options是Vue.use(参数, 配置参数)

  install(Vue, options) {
    console.log(options) // { test: 'test' }
    // Vue.mixin相当于给所有的组件添加的created生命周期
    Vue.mixin({
      created() {
        if (this.$options.rules) {
          for(let key in this.$options.rules) {
            const rule = this.$options.rules[key];
            // 监听值变化
            this.$watch(key, newValue => {
              // 验证结果
              const reuslt = rule.validate(newValue)
              if (!reuslt) {
                this.validateRes = rule.message
              } else {
                this.validateRes = ''
              }
            })
          }
        }
      }
    })
  }
}

Vue.use(RulesPlugn, { test: 'test' });



new Vue({
  render: h => h(App),
}).$mount('#app')
